<template>
  <!-- 文章详情弹窗 -->
  <!-- 这里的visible不能加.sync -->
  <!-- @open="detailArticle" -->

  <el-dialog
    class="detailDialog"
    title="文章预览"
    :visible="detailDialogVisible"
    @close="detailDialogClose"
    @open="detailArticle"
    width="80%"
  >
    <h1>{{ detailObj.title }}</h1>
    <div class="info">
      <span>作者：{{ author }}</span>
      <span>发布时间：{{ artRow.pub_date | timeFormat }}</span>
      <span>所属分类：{{ artRow.cate_name }}</span>
      <span>状态：{{ artRow.state }}</span>
    </div>
    <el-divider></el-divider>
    <img class="cover_img" :src="coverImgUrl" alt="" />
    <div class="detail-box" v-html="detailObj.content"></div>
  </el-dialog>
</template>

<script>
import { detailArticleApi } from "@/api/article";
export default {
  name: "ArticleDetail",
  props: ["detailDialogVisible", "artRow"],
  data() {
    return {
      author: JSON.parse(localStorage.getItem("vuex")).userinfo.nickname || "",
      coverImgUrl: "",
      detailObj: {
        id: "", //	number	文章 id
        title: "", //	string	标题
        content: "", //	string	内容
        cover_img: "", //	string	封面的URL地址
        pub_date: "", //	string	发表时间
        state: "", //	string	状态
        cate_id: "", //	number	所属分类 id
        author_id: "", //	number	所属作者 id
      },
    };
  },
  created() {
    // this.detailArticle();
  },
  methods: {
    detailDialogClose() {
      // 置空
      (this.copyRow = {
        id: "", // 文章 Id
        title: "", //	string	标题
        pub_date: "", //,	string	发表时间
        state: "", // string	状态
        cate_name: "", //	string	所属分类名称
      }),
        this.$emit("update:detailDialogVisible", false);
    },
    // 获取文章详情
    async detailArticle() {
      console.log("调用detailArticle");
      const res = await detailArticleApi({ id: this.artRow.id });
      if (res.data.code === 0) {
        this.detailObj = res.data.data;
        this.coverImgUrl = process.env.VUE_APP_URL + res.data.data.cover_img;
      } else {
        this.$message.error("未能获取文章详情");
      }
      this.$emit("update:detailDialogVisible", true);
    },
  },
};
</script>

<style lang="less" scoped>
.detailDialog {
  h1 {
    font-size: 24px;
    text-align: center;
    font-weight: 400;
  }
  .cover_img {
    width: 400px;
    height: 280px;
  }
  .info {
    span {
      margin-right: 20px;
    }
  }
}
</style>